<template>
  <div class="chart-container">
             <ul>
                <li v-for="(item,index) in studentList" :key="index">{{item.name}}</li>
                <br>
                <button @click="addStudent">添加一条数据</button>
            </ul>



  </div>
</template>

<script>
export default {
  name: "demoTwenty4",
  filters: {},
  data() {
    return {
           studentList: [
              { id: 1, name: '张三', age: 18 },
              { id: 2, name: '李四', age: 19 },
           ],


    };
  },
  created() {},
  mounted() {
 

  },
  methods: {

        addStudent(){
             const studentObj = { id: 3, name: '王五', age: 20 };
             this.studentList=[...this.studentList,studentObj]
       }




  }
};
</script>

<style >
/*
    定宽高 
    1.绝对定位和负magin值
    2.绝对定位 + transform
    3.flex布局

     不定宽高 
      1.绝对定位 + transform
      2.flex布局

*/
.chart-container {
  position: relative;
  width: 100%;
  height: calc(100vh - 84px);
}

/* .box {
    width: 200px;
    height: 200px;
    border: 1px solid red;
    position: relative;
}
.children-box {
    position: absolute;
    width: 100px;
    height: 100px;
    background: yellow;
    left: 50%;
    top: 50%;
    margin-left: -50px;
    margin-top: -50px; 
}
 */
</style>
